<!--
* @author wn
* @date 2022/06/20 15:01:39
* @description: 商品详情中 推荐相关 或者 猜你喜欢  轮播图
!-->
<template>
	<div class="goods-relevant">
		<div class="header">
			<i class="icon"></i>
			<span class="title"><slot /></span>
		</div>
		<!-- 轮播图 改造后的xtx-carousel.vue -->
		<xtx-carousel :sliders="sliders" autoPlay="true" />
	</div>
</template>
<script>
import { findRelevantGoods } from '@/network/product'
import { ref } from 'vue'
export default {
	name: 'GoodsRelevant',
	props: {
		goodId: {
			type: String,
			required: '',
		},
	},
	setup(props) {
		// 页容量
		const size = 4
		const sliders = ref([])
		// 商品ID，传入相关推荐，不传猜你喜欢
		findRelevantGoods({ id: props.goodId }).then(({ result }) => {
			// 总页数
			const total = Math.ceil(result.length / size)
			// 生成每一页的数据 [[],[],[],[]]
			for (let index = 0; index < total; index++) {
				sliders.value.push(result.slice(index * size, (index + 1) * size))
			}
		})
		return { sliders }
	},
}
</script>
<style scoped lang="less">
.goods-relevant {
	min-height: 460px;
	margin-top: 20px;
	background: #fff;
	.header {
		height: 80px;
		line-height: 80px;
		padding: 0 20px;
		// css 画的  伪元素跟随 父亲一起旋转
		.icon {
			display: inline-block;
			position: relative;
			width: 16px;
			height: 16px;
			border-top: 4px solid @xtxColor;
			border-right: 4px solid @xtxColor;
			transform: rotate(45deg);
			&::before {
				position: absolute;
				top: 2px;
				left: 0px;
				content: '';
				width: 10px;
				height: 10px;
				background: lighten(@xtxColor, 40%);
			}
		}
		.title {
			margin-left: 10px;
			font-size: 20px;
		}
	}
}
// 更改轮播图样式
:deep(.xtx-carousel) {
	height: 380px;
	.carousel {
		&-indicator {
			bottom: 30px;
			span {
				&.active {
					background: @xtxColor;
				}
			}
		}
		&-btn {
			top: 110px;
			opacity: 1;
			background: rgba(0, 0, 0, 0);
			color: #ddd;
			i {
				font-size: 30px;
			}
		}
	}
}
</style>
